<!--抓包抢号-->
<template>
  <div style="padding:16px">
    <div>下一次抢号日期时间：{{result}}</div>
    <div style="padding:8px">
      <van-field
          v-model="result"
          is-link
          readonly
          name="datePicker"
          label="下一次开始抢号的时间"
          label-width="12em"
          placeholder="点击选择时间"
          @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
        <van-picker-group
            title="预约日期时间"
            :tabs="['选择日期', '选择时间']"
            @confirm="onConfirm"
            @cancel="showPicker=false"
        >
          <van-date-picker
              v-model="currentDate"
              :min-date="minDate"
          />
          <van-time-picker
              v-model="currentTime"
              :columns-type="['hour', 'minute']"
          />
        </van-picker-group>
      </van-popup>
   </div>
    <div>下一次抢号倒计时：</div>
    <div style="padding:8px">
      <CountDown v-if="time" style="font-size: 18px;font-weight: bolder;color:red;"  :time="time" millisecond format="HH:mm:ss:SS"></CountDown>
    </div>

    <div>抢号结果：</div>
<!--    <div>-->
<!--      原始密文：<van-field v-model="encryptedData"></van-field>-->
<!--      <button @click="handleEncryptData">加密并发送</button>-->
<!--      <button @click="handleDecryptData">解密接收到的数据</button>-->
<!--      <p>加密结果: {{ encryptedData }}</p>-->
<!--      <p>解密结果: {{ decryptedData }}</p>-->
<!--    </div>-->
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CryptoJS from 'crypto-js';
import{CountDown} from 'vant'
import {diffMillsecond, getDateDetail} from "./dynamic-form/utils/index.ts";
import dayjs from "dayjs";
const result=ref('')
const showPicker=ref(false)

const currentTime=ref([])
const currentDate=ref([])
const minDate=ref(new Date)
// const minTime=ref(getDateDetail().time)
const time=ref(0)
const onConfirm = () => {
  console.log(currentDate.value,currentTime.value)
  // result.value = selectedValues.join('/');
  // pickerValue.value = selectedValues;
  const newTime=`${currentDate.value.join('-')} ${currentTime.value.join(':')}`;
  result.value=newTime;
  //计算毫秒数
  time.value= diffMillsecond(dayjs(newTime))
  showPicker.value = false;
};
// 定义环境变量
// const env = {
//   cryptoValue: 'vss7db748e839799', // 密钥
//   CAKEY: 'ngari-wx',
//   CASECRET: 'a9d4eb7841b1ba47'
// };
// // 获取加密密钥
// const getCryptoValue = () => {
//   return CryptoJS.enc.Utf8.parse(env.cryptoValue);
// };
// 加密函数
// const encryptData = (data) => {
//   try {
//     if (typeof data !== 'string') {
//       console.warn('加密的数据应为字符串');
//       return null;
//     }
//
//     const cipher = CryptoJS.AES.encrypt(
//         data,
//         getCryptoValue(),
//         {
//           mode: CryptoJS.mode.ECB,
//           padding: CryptoJS.pad.Pkcs7,
//           iv: CryptoJS.lib.WordArray.create([]) // 空 IV
//         }
//     );
//
//     return cipher.toString(); // 返回 Base64 编码的字符串
//   } catch (error) {
//     console.error('加密过程中发生错误:', error);
//     return null;
//   }
// };

// 解密函数
// const decryptData = (base64Cipher) => {
//   try {
//     if (!base64Cipher) {
//       console.error('无效的 Base64 编码');
//       return null;
//     }
//
//     const decipher = CryptoJS.AES.decrypt(
//         base64Cipher,
//         getCryptoValue(),
//         {
//           mode: CryptoJS.mode.ECB,
//           padding: CryptoJS.pad.Pkcs7,
//           iv: CryptoJS.lib.WordArray.create([]) // 空 IV
//         }
//     );
//
//     if (!decipher || !decipher.sigBytes) {
//       console.error('解密结果为空或无效');
//       return null;
//     }
//
//     const result = CryptoJS.enc.Utf8.stringify(decipher);
//     console.log('解密结果:', result);
//
//     // 如果需要进一步解析 JSON 格式的字符串
//     try {
//       const parsedResult = JSON.parse(result);
//       console.log('JSON 解析后的结果:', parsedResult);
//       return parsedResult;
//     } catch (e) {
//       console.log('解密结果不是有效的 JSON:', result);
//       return result;
//     }
//   } catch (error) {
//     console.error('解密过程中发生错误:', error);
//     return null;
//   }
// };

// 示例数据
// const originalData = { message: "Hello, World!" };
// const encryptedData = ref('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');
// const decryptedData = ref('');
//
// // 加密并显示结果
// const handleEncryptData = () => {
//   const dataString = JSON.stringify(originalData);
//   const encrypted = encryptData(dataString);
//   if (encrypted) {
//     encryptedData.value = encrypted;
//     console.log('加密结果:', encrypted);
//   }
// };
//
// // 解密并显示结果
// const handleDecryptData = () => {
//   if (!encryptedData.value) {
//     console.log('没有加密数据可以解密');
//     return;
//   }
//   const decrypted = decryptData(encryptedData.value);
//   decryptedData.value = decrypted ? JSON.stringify(decrypted) : '解密失败';
// };

// 初始化时尝试解密已有的加密数据
// handleDecryptData();

</script>

<style scoped>
/* 添加一些样式 */
button {
  margin: 5px;
}
p {
  margin: 10px 0;
}
</style>